 class="f15px"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<meta NAME="CONTENT-LANGUAGE" CONTENT="KR" />
	<meta NAME="ROBOTS" CONTENT="ALL" />
	<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
	<meta HTTP-EQUIV="EXPIRES" CONTENT="0" />
	<link rel="stylesheet" href="/cmp_css/common.css" />
	<link rel="stylesheet" href="/cmp_css/styleguide.css" />
	<title>10K STYLE GUIDE</title>
</head>
<body>
	<!-- s : wrap -->
	<div id="wrap">
		<!-- s : container -->
		<div id="container">
			<h1><strong>10K</strong> -  HTML & CSS Style Guide</h1>
			<div class="guide_m">
				<ol>
					<li><a href="#a_css">CSS</a>
					</li>
					<li><a href="#a_color">COLOR</a>
					</li>
					<li><a href="#a_font">FONT</a>
					</li>
					<li><a href="#a_help">풍선도움말</a>
					</li>
					<li><a href="#a_popup">팝업</a>
					</li>
					<li><a href="#a_paging">Paging</a>
					</li>
					<li><a href="#a_numberic">Numberic</a>
					</li>
					<li><a href="#a_pull">풀다운</a>
					</li>
					<li><a href="#a_icons">Icons</a>
					</li>
					<li><a href="#a_table">Table</a>
					</li>
				</ol>
			</div>
			<hr/>
			<!-- s : box [CSS] -->
			<a id="a_css"></a>
			<div class="box">
				<div class="cont0">
					<h2 class="f_col1">CSS</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<xmp class="f_col1">
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/layout.css" />
						</xmp>
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/layout.css" />
							</xmp>
						</div>
					</div>
					<div class="c3">
						<h3>[방법]</h3>
						<p class="mb10">모든 페이지에는 항상 <strong class="f_col3">common.css</strong> 와 <strong class="f_col3">layout.css</strong> 를 상단에 삽입하도록 한다</p>
						<p class="mb10">common.css - 공통으로 쓰는 클래스 ( reset.css 를 포함하고 있음 )</p>
						<p class="mb10">layout.css - 공통으로 사용하는 레이아웃 대응 클래스</p>
						<p class="mb10">main.css - 메인UI</p>
						<p class="mb10">product_list.css - 상품 리스트</p>
						<p class="mb10">product_view.css - 상세 페이지</p>
						<p class="mb10">cart.css - 장바구니,결제</p>
						<p class="mb10">mypage.css - 마이페이지</p>
						<p class="mb10">join.css - 로그인센터</p>
						<p class="mb10">service.css - 고객센터</p>
						<p class="mb10">community.css - 커뮤니티</p>
						<p class="mb10">introduction.css - 회사소개</p>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box [CSS] -->
			<!-- s : box [COLOR] -->
			<a id="a_color"></a>
			<div class="box">
				<div class="cont3">
					<h2 class="f_col1">COLOR</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<span class="verB" style="background-color:#515151">#515151</span>
						<span class="verB" style="background-color:#666666">#666666</span>
						<span class="verB" style="background-color:#D03A3E">#D03A3E</span>
						<span class="verB" style="background-color:#0B9A00">#0B9A00</span>
						<span class="verB" style="background-color:#009CD3">#009CD3</span>
						<span class="verB" style="background-color:#A246A9">#A246A9</span>
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
<div class="f_col1">#515151</div>
<div class="f_col2">#666666</div>
<div class="f_col3">#D03A3E</div>
<div class="f_col4">#0B9A00</div>
<div class="f_col5">#009CD3</div>
<div class="f_col6">#A246A9</div>
							</xmp>
						</div>
					</div>
					<div class="c3">
						<h3>[방법]</h3>
						<p class="desc mb10">위 6개 메인 컬러값외에 절대 컬러값을 알수있는 명확한 클래스명으로 정의하지 않는다 ex) .f_blue (x)</p>
						<p class="desc mb10">추후 추가되는 컬러는 .f_colN 식으로 늘려간다</p>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box [COLOR] -->
			<!-- s : box [FONT] -->
			<a id="a_font"></a>
			<div class="box">
				<div class="cont1">
					<h2 class="f_col1">FONT</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<table style="width:100%">
							<caption>맑음고딕 폰트 가이드</caption>
							<colgroup>
								<col width="3%" />
								<col width="47%" />
								<col width="47%" />
								<col width="3%" />
							</colgroup>
							<tr>
								<th class="tlc">px</th>
								<th>맑음고딕 한글</th>
								<th>맑음고딕 영문/숫자</th>
								<th class="trc">상하
									<br/>여백</th>
							</tr>
							<tr class="f11px">
								<td class="tlc">11</td>
								<td>텐케이는 아웃도어 전문몰입니다.
									<br/><strong>텐케이는 아웃도어 전문몰입니다.</strong>
								</td>
								<td>abcdefghiJklmnopqrstuvwxyz
									<br/>ABCDEFGHIJKLMNOPQRSTUVWXYZ
									<br/>0123456789
									<br/>
								</td>
								<td class="trc">18px</td>
							</tr>
							<tr class="f12px">
								<td class="tlc">12</td>
								<td>텐케이는 아웃도어 전문몰입니다.
									<br/><strong>텐케이는 아웃도어 전문몰입니다.</strong>
								</td>
								<td>abcdefghiJklmnopqrstuvwxyz
									<br/>ABCDEFGHIJKLMNOPQRSTUVWXYZ
									<br/>0123456789
									<br/>
								</td>
								<td class="trc">18px</td>
							</tr>
							<tr class="f13px">
								<td class="tlc">13</td>
								<td>텐케이는 아웃도어 전문몰입니다.
									<br/><strong>텐케이는 아웃도어 전문몰입니다.</strong>
								</td>
								<td>abcdefghiJklmnopqrstuvwxyz
									<br/>ABCDEFGHIJKLMNOPQRSTUVWXYZ
									<br/>0123456789
									<br/>
								</td>
								<td class="trc">18px</td>
							</tr>
							<tr class="f14px">
								<td class="tlc">14</td>
								<td>텐케이는 아웃도어 전문몰입니다.
									<br/><strong>텐케이는 아웃도어 전문몰입니다.</strong>
								</td>
								<td>abcdefghiJklmnopqrstuvwxyz
									<br/>ABCDEFGHIJKLMNOPQRSTUVWXYZ
									<br/>0123456789
									<br/>
								</td>
								<td class="trc">18px</td>
							</tr>
							<tr class="f15px">
								<td class="tlc">15</td>
								<td>텐케이는 아웃도어 전문몰입니다.
									<br/><strong>텐케이는 아웃도어 전문몰입니다.</strong>
								</td>
								<td>abcdefghiJklmnopqrstuvwxyz
									<br/>ABCDEFGHIJKLMNOPQRSTUVWXYZ
									<br/>0123456789
								</td>
								<td class="trc">18px</td>
							</tr>
						</table>
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
<span class="f11px">맑은 고딕</span>
<span class="f12px">돋움</span>
<span class="f13px">13px</span>
<span class="f14px">14px</span>
<span class="f15px">15px</span>
							</xmp>
						</div>
					</div>
					<div class="c3">
						<h3>[방법]</h3>
						<p class="mb10">한글 - 웹폰트 맑은 고딕</p>
						<p class="mb10">한글 - 돋움 (특정부분에 적용)</p>
						<p class="mb10">영문 - Verdana (특정부분에 적용)</p>
						<p class="mb10">문서자체가 나눔고딕을 쓰게끔 되어 있으므로 따로 설정할 필요는 없다.</p>
						<p class="mb10">새로운 문서에서 어느 특정부분만 나눔고딕으로 하고 싶다면 다음과 같이하라</p>
						<p class="mb10"><strong class="f_col1">class="ng"</strong> 기본이며, <strong class="f_col1">class="ngB"</strong> 이면 bold 체가 된다.</p>
						<p class="mb10">만약 어느 특정부분을 <strong class="f_col1">돋움체</strong>로 처리하려면 <strong class="f_col1">class="dm"</strong> 하면 된다</p>
						<p class="mb10">만약을 대비해 서버 혹은, 폰트 이상으로 폰트가 보이지 않을시 대체폰트로 돋움체가 적용된다.</p>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box [FONT] -->
			<!-- s : box [풍선도움말] -->
			<a id="a_help"></a>
			<div class="box">
				<div class="cont2">
					<h2 class="f_col1">풍선도움말</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<div class="posR">
							<div class="helper on" style="width:200px;">
								<span class="helper_arrow" style="left:30px;top:-6px;"></span>
								<div class="helper_conts">
									<strong>위 : <span class="f_col1">class="helper on"</span></strong>
								</div>
							</div>
						</div>

						<div class="posR">
							<div class="helper down on" style="width:200px;left:220px;">
								<span class="helper_arrow" style="left:30px;"></span>
								<div class="helper_conts">
									<strong>아래 : <span class="f_col1">class="helper down on"</span></strong>
								</div>
							</div>
						</div>

						<div class="posR">
							<div class="helper left on" style="width:200px;left:440px;">
								<span class="helper_arrow" style="top:15px;"></span>
								<div class="helper_conts">
									<strong>왼쪽 : <span class="f_col1">class="helper left on"</span></strong>
								</div>
							</div>
						</div>

						<div class="posR">
							<div class="helper right on" style="width:200px;left:660px;">
								<span class="helper_arrow" style="top:15px;"></span>
								<div class="helper_conts">
									<strong>오른쪽 : <span class="f_col1">class="helper right on"</span></strong>
								</div>
							</div>
						</div>

					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
								<div class="posR">

									----- s : 실제 가져가는 소스 -----
									<div class="layer_name">
										<div class="helper on">
											<span class="helper_arrow"></span>
											<div class="helper_conts">
												[contents]
											</div>
										</div>
									</div>
									----- e : 실제 가져가는 소스 -----

								</div>
							</xmp>
						</div>
						<p class="f_col1 mb10">css 적용시 올바른 방법</p>
						<div class="cssSection">
							<xmp>.layer_name .helper .helper_arrow{left:20px;}</xmp>
						</div>
						<p class="f_col1 mb10">css 적용시 잘못된 방법 <span class="f_gray">   (공통으로 쓰이기 때문에 .helper로 직접 접근하면 전체가 다 먹어버림 주의)</span>
						</p>
						<div class="cssSection">
							<xmp>.helper .helper_arrow{left:20px;}</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10"><strong class="f_col1">.helper 도움말 창으로 공통 스타일이다.</strong> 
							</p>
							<p class="desc mb10"><strong class="f_col1">class="helper"</strong> 기본이며, <strong class="f_col1">class="helper on"</strong> 이면 나타나게 된다.</p>
							<p class="desc mb10">소스처럼, 부모 엘리먼트 혹은 layer_name 에 <strong class="f_col1">class="posR"</strong>과 함께 동반하여야 한다</p>
							<p class="desc mb10">풍선도움말의 마크업 위치는, 띄울 버튼 바로 아래 위치시킨다</p>
							<p class="desc mb10">width는 <span class="f_col1">class="helper_conts"</span>에 지정해준다.</p>

							<p class="desc mb10 f_bl1">단, 클래스 속성 추가시 <span class="f_col1">.helper</span> 로 바로 접근하지 말자. 아래와 같이 하라. <strong>(공통으로 쓰고 있음을 잊지말라)</strong>
							</p>
							<p class="desc mb10 f_bl1">속성변경시<span class="f_col1">.parentClassName .helper</span> 처럼 상위클래스(부모클래스)를 타고 접근하라.</p>
							<p class="desc mb10 f_bl1">화살표 위치를 바꾸고 싶을때는 <strong class="f_col1">class="helper"</strong> 에 <span class="f_col1">down(아래) , right(오른쪽) , left(왼쪽)</span> 를 추가한다</p>
							<p class="desc mb10 f_bl1">ex) <strong class="f_col1">class="helper down on"</strong>
							</p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[풍선도움말] -->
			<!-- s : box [팝업] -->
			<a id="a_popup"></a>
			<div class="box">
				<div class="cont4">
					<h2 class="f_col1">팝업</h2>
					<div class="c1 mB20">
						<h3>[ type_1 예시 ]</h3>
						<div class="pop_wrap" style="height:170px;">
							<div class="pop_conts">
								<!-- s : 내용 -->
								<h3>팝업 타이틀</h3>
								<div class="section"></div>
								<!-- e: 내용 -->
								<!-- s : 창닫기 -->
								<span class="btn_close"><button type="button" title="창닫기"><span class="blind">창닫기</span>
								</button>
								</span>
								<!-- e : 창닫기 -->
							</div>
						</div>
					</div>
					<div class="c2">
						<h3>[ type_1 소스 ]</h3>
						<div class="cssSection">
							<xmp>
								<div class="pop_wrap">
									<div class="pop_conts">
										<!-- s : 내용 -->
										<h3>Alert</h3>
										<div class="section">
											[contents]
										</div>
										<!-- e: 내용 -->
										<!-- s : 창닫기 -->
										<span class="btn_close"><button type="button" title="창닫기"><span class="blind">창닫기</span>
										</button>
										</span>
										<!-- e : 창닫기 -->
									</div>
								</div>
							</xmp>
						</div>
					</div>
					<hr/>
					<div class="c1 mB20">
						<h3>[ type_2 예시 ]</h3>
						<div class="pop_info_set">
							<div class="pop_section">
								
							</div>
							<!-- s : 창닫기 -->
							<span class="btn_close"><button type="button" title="창닫기"><span class="blind">창닫기</span>
							</button>
							</span>
							<!-- e : 창닫기 -->
						</div>
					</div>
					<div class="c2">
						<h3>[ type_2 소스 ]</h3>
						<div class="cssSection">
							<xmp>
								<div class="pop_wrap">
									<div class="pop_info_set className">
										<div class="pop_section">
											[contents]
										</div>
										<!-- s : 창닫기 -->
										<span class="btn_close"><button type="button" title="창닫기"><span class="blind">창닫기</span>
										</button>
										</span>
										<!-- e : 창닫기 -->
									</div>
								</div>
							</xmp>
						</div>
						<div class="c3">
							<h3>[ type_2 방법 ]</h3>
							<p class="desc mb10"><span class="f_col1">.pop_section</span> 영역안에 컨텐츠를 삽입니다.</p>
							<p class="desc mb10 f_bl1">단, 클래스 속성 추가시 <span class="f_col1">.pop_info_set</span> 로 바로 접근하지 말자. 아래와 같이 하라. (공통으로 쓰고 있음을 잊지말라)</p>
							<p class="desc mb10 f_bl1"><span class="f_col1">.className</span> 연관클래스를 만들어 접근하라.</p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[팝업] -->
			<!-- s : box [리스트 페이징] -->
			<a id="a_paging"></a>
			<div class="box">
				<div class="cont4">
					<h2 class="f_col1">Paging</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<div class="paging_wrap">
							<div class="page">
								<a href="#nowhere" class="first">
									<img src="" alt="맨처음" />
								</a>
								<a href="#nowhere" class="prev">
									<img src="" alt="이전" />
								</a>
								<a href="#nowhere">1</a>
								<strong>2</strong>
								<a href="#nowhere">3</a>
								<a href="#nowhere">4</a>
								<a href="#nowhere">5</a>
								<a href="#nowhere">6</a>
								<a href="#nowhere">7</a>
								<a href="#nowhere">8</a>
								<a href="#nowhere">9</a>
								<a href="#nowhere">10</a>
								<a href="#nowhere" class="next">
									<img src="" alt="다음" />
								</a>
								<a href="#nowhere" class="last">
									<img src="" alt="맨뒤로" />
								</a>
							</div>
						</div>
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
								<div class="paging_wrap">
									<div class="page">
										<a href="#nowhere" class="first">
											<img src="" alt="맨처음" />
										</a>
										<a href="#nowhere" class="prev">
											<img src="" alt="이전" />
										</a>
										<a href="#nowhere">1</a>
										<strong>2</strong>
										<a href="#nowhere">3</a>
										<a href="#nowhere">4</a>
										<a href="#nowhere">5</a>
										<a href="#nowhere">6</a>
										<a href="#nowhere">7</a>
										<a href="#nowhere">8</a>
										<a href="#nowhere">9</a>
										<a href="#nowhere">10</a>
										<a href="#nowhere" class="next">
											<img src="" alt="다음" />
										</a>
										<a href="#nowhere" class="last">
											<img src="" alt="맨뒤로" />
										</a>
									</div>
								</div>
							</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10">선택된 넘버는 <span class="f_col1">a</span> 태그 대신 , <span class="f_col1">strong</span>태그로 감싸준다.</p>
							<p class="desc mb10"><span class="f_col1">class="paging_wrap"</span>는 <span class="f_col1">margin-bottom:30px</span>을 기본으로 먹고있다.</p>
							<p class="desc mb10">margin 없이 가져 가고 싶다면 <span class="f_col1">class="page_wrap mB0"</span> 추가한다</p>
							<p class="desc mb10">정렬은 항상 가운데 정렬을 원칙으로 한다</p>
							<p class="desc mb10">왼쪽정렬 : <span class="f_col1">class="page"</span> 자체에 <span class="f_col1">class="page tL"</span> 추가한다</p>
							<p class="desc mb10">오른쪽정렬 : <span class="f_col1">class="page"</span> 자체에 <span class="f_col1">class="page tR"</span> 추가한다</p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[리스트 페이징] -->
			<!-- s : box [Numberic] -->
			<a id="a_numberic"></a>
			<div class="box">
				<div class="cont5">
					<h2 class="f_col1">Numberic</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<div class="num_selector">
							<span class="pd"><input type="text" class="bd"/></span>
							<span class="btn_set">
		<span class="btn_up"><button type="button" title="상품증가"><span class="blind
		">증가</span>
							</button>
							</span>
							<span class="btn_down"><button type="button" title="상품감소"><span class="blind">감소</span>
							</button>
							</span>
							</span>
							<span class="txt">개</span>
						</div>
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
								<div class="num_selector">
									<span class="pd"><input type="text" class="bd"/></span>
									<span class="btn_set">
		<span class="btn_up"><button type="button" title="상품증가"><span class="blind">증가</span>
									</button>
									</span>
									<span class="btn_down"><button type="button" title="상품감소"><span class="blind">감소</span>
									</button>
									</span>
									</span>
									<span class="txt">개</span>
								</div>
							</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10"></p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[Numberic] -->
			<!-- s : box [풀다운] -->
			<a id="a_pull"></a>
			<div class="box">
				<div class="cont6">
					<h2 class="f_col1">풀다운</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<div class="posR">
							<div class="item_sel_wrap">
								<div class="item_title">
									<p>사이즈선택</p>
									<span class="btn_sel"><button type="button" title="사이즈선택"><span class="blind">사이즈선택</span>
									</button>
									</span>
								</div>
								<ul class="item_sel">
									<li><a href="#nowhere">Free - 단일 사이즈</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="posR">
							<div class="item_sel_wrap on">
								<div class="item_title">
									<p>사이즈선택</p>
									<span class="btn_sel"><button type="button" title="사이즈선택"><span class="blind">사이즈선택</span>
									</button>
									</span>
								</div>
								<ul class="item_sel">
									<li><a href="#nowhere">Free - 단일 사이즈</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
									<li><a href="#nowhere">250mm-255mm</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
								<div class="posR">
									<!-- class="item_sel_wrap on" 경우 - 아래 리스트 보임 : 기본 안보임 -->
									<div class="item_sel_wrap">
										<div class="item_title">
											<p>사이즈선택</p>
											<span class="btn_sel"><button type="button" title="사이즈선택"><span class="blind">사이즈선택</span>
											</button>
											</span>
										</div>
										<ul class="item_sel">
											<li><a href="#nowhere">Free - 단일 사이즈</a>
											</li>
											<li><a href="#nowhere">250mm-255mm</a>
											</li>
											<li><a href="#nowhere">250mm-255mm</a>
											</li>
										</ul>
									</div>
								</div>
							</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10"><span class="f_col1 fB">class="item_sel_wrap"</span>에 <span class="f_col1 fB">class="item_sel_wrap <strong>on</strong>"</span>을 추가하면 풀다운리스트가 나타난다.</p>
							<p class="desc mb10">자식 리스트 길이만큼 width,height 는 가변적이다.</p>
							<p class="desc mb10">만약, <span class="f_col1 fB">class="posR"</span>를 가진 엘리먼트가 다른 엘리먼트에 가려져 밑에 깔릴경우, <span class="f_col1 fB">class="posR"</span>을 가진 엘리먼트에 <span class="f_col1 fB">z-index</span>를 주어 <span class="f_col1 fB">depth</span>를 설정해 보도록 한다.</p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[풀다운] -->
			<!-- s : box [ScrollBar] -->
			<a id="a_pull"></a>
			<div class="box">
				<div class="cont8">
					<h2 class="f_col1">ScrollBar</h2>
					<div class="c1 mB20">
						<h3>[예시]</h3>
						<!-- s : scroll_bar-->
						<div class="scroll_wrap">
							<div class="scroll_box">
								<ul class="scroll_list">
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
									<li><a href="#"></a>
									</li>
								</ul>
							</div>
							<!-- s : 커스텀 스크롤 툴바 -->
							<div class="scrollbar_tool">
								<span class="scrollbar_btn_up"><button type="button"><span class="blind">위로</span>
								</button>
								</span>
								<div class="scrollbar_track"><span class="scrollbar_thumb"></span>
								</div>
								<span class="scrollbar_btn_down"><button type="button"><span class="blind">아래로</span>
								</button>
								</span>
							</div>
							<!-- e : 커스텀 스크롤 툴바 -->
						</div>
						<!-- e : scroll_bar -->
					</div>
					<div class="c2">
						<h3>[소스]</h3>
						<div class="cssSection">
							<xmp>
								<div class="scroll_wrap">
									<div class="scroll_box">
										<ul class="scroll_list">
											<li><a href="#nowhere"><span class="f_col1">나이</span>키</a>
											</li>
											<li><a href="#nowhere"><span class="f_col1">나이</span>트이즈</a>
											</li>
											<li><a href="#nowhere">라이더스</a>
											</li>
										</ul>
									</div>
								</div>
							</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10"></p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[ScrollBar] -->
			<!-- s : box [아이콘] -->
			<a id="a_icons"></a>
			<div class="box">
				<div class="cont7">
					<h2 class="f_col1">Icons</h2>
					<div class="c1 mB20">
						<h3>[상품 뷰 아이콘]</h3>
						<div>
							<table class="type1">
								<caption>상품기본정보</caption>
								<colgroup>
									<col width="10%" />
									<col width="10%" />
									<col width="14%" />
									<col width="14%" />
									<col width="14%" />
									<col width="19%" />
									<col width="*" />
								</colgroup>
								<thead>
									<tr>
										<th class="tlc">남성</th>
										<th>여성</th>
										<th>new</th>
										<th>하루특가</th>
										<th>BEST</th>
										<th>주문건당 100원 무조건 기부</th>
										<th class="trc">모바일상품권 3% 추가할인</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="tlc">
											<p class="icons"><span class="icon_sex_m"><span>남성</span></span>
											</p>
										</td>
										<td>
											<p class="icons"><span class="icon_sex_w"><span>여성</span></span>
											</p>
										</td>
										<td>
											<p class="icons"><span class="icon_new"><span>new</span></span>
											</p>
										</td>
										<td>
											<p class="icons"><span class="icon_oneday"><span>하루특가</span></span>
											</p>
										</td>
										<td>
											<p class="icons"><span class="icon_best"><span>BEST</span></span>
											</p>
										</td>
										<td>
											<p class="icons"><span class="icon_100w"><span>주문건당 100원 무조건 기부</span></span>
											</p>
										</td>
										<td class="trc">
											<p class="icons"><span class="icon_add_mobile"><span>모바일상품권 3%추가할인</span></span>
											</p>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="c2">
						<h3>[상품뷰 아이콘 - 소스]</h3>
						<div class="cssSection">
							<xmp>
								<p class="icons">
									<span class="icon_sex_m"><span>남성</span></span>
									<span class="icon_sex_w"><span>여성</span></span>
									<span class="icon_new"><span>new</span></span>
									<span class="icon_oneday"><span>하루특가</span></span>
									<span class="icon_best"><span>BEST</span></span>
									<span class="icon_100w"><span>주문건당 100원 무조건 기부</span></span>
									<span class="icon_add_mobile"><span>모바일상품권 3%추가할인</span></span>
									<span class="icon_100w"><span>주문건당 100원 무조건 기부</span></span>
								</p>
							</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10">항상 <span class="f_col1">class="icons"</span>와 동반하여야 한다.</p>
							<p class="desc mb10 f_bl1">단, 클래스 속성 추가시 <span class="f_col1">.icons</span> 로 바로 접근하지 말자. 아래와 같이 하라. <strong>(공통으로 쓰고 있음을 잊지말라)</strong>
							</p>
							<p class="desc mb10 f_bl1"><span class="f_col1">.parentClassName .icons</span> 처럼 상위클래스(부모클래스)를 타고 접근하라.</p>
						</div>
						<hr />
						<h3>[상품 리스트 아이콘]</h3>
						<table class="type1 mB20">
							<caption>상품기본정보</caption>
							<colgroup>
								<col width="25%" />
								<col width="25%" />
								<col width="25%" />
								<col width="25%" />
							</colgroup>
							<thead>
								<tr>
									<th class="tlc">땡처리</th>
									<th>쿠폰적용</th>
									<th>기간한정</th>
									<th class="trc">우수고객 추가할인</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="tlc">
										<div class="sale_rule">
											<p class="prd_ddang">
												<span class="icon">땡처리</span>
												<span class="txt">30%할인</span>
											</p>
										</div>
									</td>
									<td>
										<div class="sale_rule">
											<p class="prd_coupon">
												<span class="icon">쿠폰적용</span>
												<span class="txt">10%할인</span>
											</p>
										</div>
									</td>
									<td>
										<div class="sale_rule">
											<p class="prd_period_limit">
												<span class="icon">기간한정</span>
												<span class="txt">10%할인</span>
											</p>
										</div>
									</td>
									<td class="trc">
										<div class="sale_rule">
											<p class="prd_woosu">
												<span class="icon">우수고객 추가할인</span>
												<span class="txt">5%할인</span>
												<span class="btn_info"><button type="button" title="도움말"><span class="blind">도움말</span>
												</button>
												</span>
											</p>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
						<h3>[상품 리스트 아이콘 - 소스]</h3>
						<div class="cssSection">
							<xmp>
								<div class="sale_rule">
									<!-- 뗑처리 -->
									<p class="prd_ddang">
										<span class="icon">땡처리</span>
										<span class="txt">30%할인</span>
									</p>
									<!-- 쿠폰적용 -->
									<p class="prd_coupon">
										<span class="icon">쿠폰적용</span>
										<span class="txt">10%할인</span>
									</p>
									<!-- 기간한정 -->
									<p class="prd_period_limit">
										<span class="icon">기간한정</span>
										<span class="txt">10%할인</span>
									</p>
									<!-- 우수고객할인 -->
									<p class="prd_woosu">
										<span class="icon">우수고객 추가할인</span>
										<span class="txt">5%할인</span>
										<span class="btn_info"><button type="button" title="도움말"><span class="blind">도움말</span>
										</button>
										</span>
									</p>
								</div>
							</xmp>
						</div>
						<div class="c3">
							<h3>[방법]</h3>
							<p class="desc mb10">항상 <span class="f_col1">class="sale_rule"</span>와 동반하여야 한다.</p>
							<p class="desc mb10 f_bl1">단, 클래스 속성 추가시 <span class="f_col1">.sale_rule</span> 로 바로 접근하지 말라. 아래와 같이 하라. <strong>(공통으로 쓰고 있음을 잊지말라)</strong>
							</p>
							<p class="desc mb10 f_bl1"><span class="f_col1">.parentClassName .sale_rule</span> 처럼 상위클래스(부모클래스)를 타고 접근하라.</p>
						</div>
						<hr />
						<h3>[ 기타 아이콘 ]</h3>
						<table class="type1 mB20">
							<caption>기타아이콘</caption>
							<colgroup>
								<col width="33%" />
								<col width="33%" />
								<col width="33%" />
							</colgroup>
							<thead>
								<tr>
									<th class="tlc">notice</th>
									<th>미답변</th>
									<th class="trc">완료</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="tlc">
										<img src="" alt="notice" />
									</td>
									<td>
										<img src="" alt="미답변" />
									</td>
									<td class="trc">
										<img src="" alt="완료" />
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[아이콘] -->
			<!-- s : box [테이블] -->
			<a id="a_table"></a>
			<div class="box">
				<div class="cont9">
					<h2 class="f_col1">Table</h2>
					<div class="c1 mB20">
						<h3>[ 예시 ]</h3>
						<!-- s : 테이블 기본 레이아웃 -->
						<table class="type1">
							<caption>table style</caption>
							<colgroup>
								<col width="15%" />
								<col width="*" />
								<col width="20%" />
								<col width="20%" />
							</colgroup>
							<thead>
								<tr>
									<th class="tlc">th class="tlc"</th>
									<th class="tvm">th</th>
									<th>th</th>
									<th class="trc">th class="trc"</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="tlc">td class="tlc"</td>
									<td>td</td>
									<td>td</td>
									<td class="trc">td class="trc"</td>
								</tr>
							</tbody>
						</table>
						<hr />
						<table class="type2">
							<caption>table style</caption>
							<colgroup>
								<col width="15%" />
								<col width="*" />
								<col width="20%" />
								<col width="20%" />
							</colgroup>
							<thead>
								<tr>
									<th class="tlc">th class="tlc"</th>
									<th class="tvm">th</th>
									<th>th</th>
									<th class="trc">th class="trc"</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="tlc">td class="tlc"</td>
									<td>td</td>
									<td>td</td>
									<td class="trc">td class="trc"</td>
								</tr>
							</tbody>
						</table>
						<!-- e : 테이블 기본 레이아웃 -->
					</div>
					<div class="c2">
						<h3>[ 소스 ]</h3>
						<div class="cssSection">
							<xmp>
								<table class="type1">
									<caption>테이블 정보</caption>
									<colgroup>
										<col width="15%" />
										<col width="*" />
										<col width="20%" />
										<col width="20%" />
									</colgroup>
									<thead>
										<tr>
											<th class="tlc">사용권장일</th>
											<th>권장일</th>
											<th>브랜드국(원산지)</th>
											<th class="trc">독일 OEM</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td class="tlc">배송정보</td>
											<td><span class="f_col1">전국무료배송</span> | 당일배송 | 무료교화/환불 | 맞교환</td>
											<td>브랜드국</td>
											<td class="trc">독일</td>
										</tr>
									</tbody>
								</table>
							</xmp>
						</div>
						<div class="c3">
							<h3>[ 방법 ]</h3>
							<p class="desc mb10"><span class="f_col1">class="type1"</span>은 <span class="f_col1">gray table</span> 이다</p>
							<p class="desc mb10"><span class="f_col1">class="type2"</span>은 <span class="f_col1">orange table</span> 이다</p>
							<p class="desc mb10"><span class="f_col1">th,td</span> 갯수 만큼 <span class="f_col1">colgroup</span>의 <span class="f_col1">col</span> 갯수를 늘려간다</p>
							<p class="desc mb10"><span class="f_col1">width</span> 는 <span class="f_col1">colgroup</span>의 <span class="f_col1">col</span>의 <span class="f_col1">width</span>로 직접 설정한다</p>
							<p class="desc mb10"><span class="f_col1">width</span> 는 <span class="f_col1">퍼센트</span>로 정하며, 적당한 퍼센트를 분배하고 가장 긴 영역은 <span class="f_col1">*</span> 로 설정한다</p>
							<p class="desc mb10"><span class="f_col1">class="tlc"</span> 는 왼쪽 라인 제거하는 <strong>공통 클래스</strong>
							</p>
							<p class="desc mb10"><span class="f_col1">class="trc"</span> 는 오른쪽 라인 제거하는 <strong>공통 클래스</strong>
							</p>
							<p class="desc mb10">세로 보더를 없애고 싶을시 <span class="f_col1">class="type1" / class="type2"</span>에 <span class="f_col1">.noBorder</span>를 추가하라</p>
							<p class="desc mb10 f_bl1">단, 클래스 속성 추가시 <span class="f_col1">.type_1</span> 로 바로 접근하지 말라. 아래와 같이 하라. <strong>(공통으로 쓰고 있음을 잊지말라)</strong>
							</p>
							<p class="desc mb10 f_bl1"><span class="f_col1">.parentClassName .type_1</span> 처럼 상위클래스(부모클래스)를 타고 접근하라.</p>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<!-- e : box[테이블] -->
			<!-- s : footer -->
			<div id="footer" class="verB">
				copyright(c) all rights reserved. 2015
			</div>
			<!-- e : footer -->
		</div>
		<!-- e : container -->
	</div>
	<!-- e : wrap -->
</body>
</html>